<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { GetStorePayloadType, GetStoreResType, Store } from '@/api/store/types'

import mock from '~mock/store'

import { reactive } from 'vue'
import { useConfirm } from '@/hooks/useConfirm'

// 表单数据（筛选）
const formData = reactive<GetStorePayloadType>({
	pagenum: 1,
	pagesize: 10
})

// 表格数据
const tableData = reactive<GetStoreResType>({
	data: mock.data,
	total: mock.total
})

// 批量删除
let ids: Array<number | string> = []
const handleCheckboxChange = (rowArr: Store[]) => {
	// console.log('所有勾选数据：', rowArr)  数组里面是一个个当前行数据
	ids = [] // 切记上一次保存的
	rowArr.forEach((row: Store) => {
		ids.push(row.id) // 重新保存
	})
}
const handleDeletes = () => {
	console.log('要删除的数据编号', ids)
}

const handleDelete = (id: number | string) => {
	console.log(id)
	useConfirm()
}

const handleSort = (data: any) => {
	console.log('自定义排序：', data)
}

// 分页
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}
</script>

<template>
	<QfBox :filter="false">
		<!-- 内容 -->
		<!-- 按钮控件 -->
		<el-row>
			<el-button type="danger" @click="handleDeletes"><span class="iconfont icon-shanchu"></span>批量删除</el-button>
			<el-button type="primary" @click="$router.push('/user/create')"><span class="iconfont icon-jiahao"></span>添加</el-button>
		</el-row>
		<!-- 按钮控件 -->

		<!-- 表格 -->
		<el-table :data="tableData.data" :border="true" @selection-change="handleCheckboxChange" @sort-change="handleSort">
			<el-table-column align="center" label="复选" fixed="left" type="selection" width="55"></el-table-column>
			<!-- <el-table-column align="center" label="编号" prop="id" width="180" sortable="custom"></el-table-column> -->
			<el-table-column align="center" label="编号" prop="id" width="180" sortable></el-table-column>
			<el-table-column align="center" label="封面" width="100">
				<template #default="scope">
					<el-avatar shape="square" :size="60" fit="fill" :src="scope.row.img" />
				</template>
			</el-table-column>
			<el-table-column align="center" label="标题" prop="title" width="300" show-overflow-tooltip></el-table-column>

			<el-table-column align="center" label="好评" prop="comment_goods_count" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="差评" prop="comment_bad_count" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="总评" prop="comment_count" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="销量" prop="sell_count" width="80" show-overflow-tooltip></el-table-column>

			<el-table-column align="center" label="联系方式" prop="mobile" width="120"></el-table-column>
			<el-table-column align="center" label="营业时间" prop="work" width="170"></el-table-column>

			<el-table-column align="center" label="操作" fixed="right" width="240">
				<template #default="scope">
					<el-button type="primary" size="small">
						<span class="iconfont icon-bianji"></span>
					</el-button>
					<el-button type="danger" size="small" @click="handleDelete(tableData.data[scope.$index].id)">
						<span class="iconfont icon-shanchu"></span>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 表格 -->

		<!-- 分页 -->
		<el-pagination
			background
			v-model:current-page="formData.pagenum"
			v-model:page-size="formData.pagesize"
			:page-sizes="[10, 50, 100, 150]"
			layout="total, sizes, prev, pager, next, jumper"
			:total="tableData.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
		<!-- 分页 -->
		<!-- 内容 -->
	</QfBox>
</template>

<style lang="scss" scoped></style>
